<template>
	<view>
		<u-popup v-model="visibleDialog" mode="bottom">
			<view class="popup">
				<uni-list>
					<uni-list-item 
						v-for="(item, index) in productList"
						:key="index"
						:title="item.name + '(' + item.unit + ')'"
						:rightText="item.standardAmount + ''"
						:clickable="true"
						@click="productClick(index)"
						>
					</uni-list-item>
				</uni-list>
				<view style="height: 20rpx;"></view>
				<uni-pagination title="标题文字" :total="productNumber" @change="pageChange"></uni-pagination>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getProduct } from '@/api/clientele.js'
	export default {
		name: 'PorductSelectView',
		props: {
			visible: {
			  type: Boolean,
			  default: false
			},
		},
		computed: {
			visibleDialog: {
			  get () {
				return this.visible
			  },
			  set (val) {
				this.$emit('update:visible', val)
			  }
			}
		},
		data() {
			return {
				productNumber: 0,
				productList: [],
				productPage: 1,
			}
		},
		created() {
			this.getProduct();
		},
		methods: {
			getProduct() {
				getProduct({pageNum: this.productPage - 1}).then(res => {
					console.log(res);
					this.productNumber = res.data.totalElements;
					this.productList = res.data.content;
				})
			},
			
			productClick(res) {
				console.log('productClick');
				console.log(res);
				this.visibleDialog = false;
				this.$emit('confirm', this.productList[res]);
			},
			
			pageChange(res) {
				console.log(res);
				this.productPage = res.current;
				this.getProduct();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		padding: 30rpx;
	}
</style>